import React, { useEffect, useState } from 'react'
/* useEffect:
    -Effect Hook 可以让你在函数组件中执行副作用操作
    -Effect可以告诉React组件需要在挂载完成.更新完成.卸载前执行某些操作
    -useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
    -useEffect接受第二个参数是一个数组
      -数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
      -如果传递的是一个空数组,则useEffect回调函数只有在初识阶段才执行
      -如果不传递第二个参数,则无论初始化还是更新的时候都会执行
    -useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或再次渲染的时候,会执行这个函数,用来做收尾工作
    -useEffect可以根据逻辑书写多次
*/

export default function App() {
  
  const [count, setCount] = useState(0);
  const [isHot, setIsHot] = useState(false);
  
  useEffect(() => {
    console.log('isHot执行了');
    return () => {
      console.log('isHot的Effect卸载函数'+count);
      }
      }, [isHot,count]);

  useEffect(() => {
    console.log('count执行了');
  }, [count]);


 
  return (
    <div>
    <h1>count的值是{count}</h1>
    <button onClick={() => {setCount(count + 1)}}>累加</button>  

    <hr />

    <h1>天气真的{isHot ? '热啊' :'冷啊'}</h1>
    <button onClick={() => {setIsHot(!isHot)}}>变温</button>
    </div>
  )
}
 